// Settings
@import "config/settings";
@import "config/keyframes";

// Load PrestaShop UI Kit
@import "~prestakit/scss/application";

// Tools
@import "~dropzone/dist/min/dropzone.min.css";
@import "~magnific-popup/dist/magnific-popup.css";
@import "~bourbon";
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
@import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css";
@import "~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css";
@import "mixins/single_line_block";
@import "mixins/notification_container";
@import "mixins/notification_counter";
@import "~bootstrap/scss/mixins/breakpoints";
@import "mixins/cards";
@import "mixins/hover";
@import "mixins/stars";

// Tools with vars overwritten
@import "~bootstrap/scss/mixins/transition";
@import "~bootstrap/scss/mixins/border-radius";

// Components
@import "components/alert";
@import "components/button";
@import "components/button_groups";
@import "components/cards";
@import "components/category_tree";
@import "components/choice_table";
@import "components/colorpicker";
@import "components/cursor";
@import "components/datepicker";
@import "components/delta_quantity";
@import "components/disabling_switch";
@import "components/dropzone";
@import "components/enriched_choice";
@import "components/entity_search";
@import "components/font";
@import "components/form";
@import "components/form_popover_error";
@import "components/grid";
@import "components/hint_box";
@import "components/layout/content_div";
@import "components/layout/header-multistore";
@import "components/layout/header-search";
@import "components/layout/header_toolbar";
@import "components/layout/kpi";
@import "components/layout/light_display";
@import "components/layout/main_header";
@import "components/layout/nav_bar";
@import "components/material_choice_tree";
@import "components/modal";
@import "components/modulescards";
@import "components/multishop-modal";
@import "components/multistore-dropdown";
@import "components/multishop-selector";
@import "components/navigation_tab";
@import "components/notifications";
@import "components/password";
@import "components/ps_dropdown";
@import "components/ps_number";
@import "components/ps_radio";
@import "components/ps_spinner";
@import "components/ps_tree";
@import "components/showcase-card";
@import "components/submittable_input";
@import "components/timeline";
@import "components/toggable_field";
@import "components/tooltip";
@import "components/translatable_input";
@import "components/unavailable-feature";
@import "components/typeahead_product_collection_type";
@import "components/skeleton";

// Pages specifics SCSS files
@import "pages/invoices";
@import "pages/meta";
@import "pages/import_data";
@import "pages/currency";
@import "pages/themes_logo";
@import "pages/themes_import";
@import "pages/employee";
@import "pages/error";
@import "pages/order_states";
@import "pages/attribute";
@import "pages/customer_thread";
@import "pages/customer";
@import "pages/compromised";
@import "pages/improve";
@import "pages/payment";
@import "pages/translation_page";
@import "pages/product_preferences";
@import "pages/admin_api";
@import "pages/discount";
@import "pages/carrier";

// Main Layout
@import "pages/modules";

// Other
@import "components/tinymce";

@import "components/layout/right-sidebar";
@import "../css/module/drop.css";

// Main Layout
body {
  direction: ltr;
  background: var(--#{$cdk}primary-200);
}

// To put into the PrestaKit
._fullspace {
  width: 100%;
  height: 100%;
}

.bordered {
  > .panel {
    border: 0;
  }

  > .nav-item > .nav-link {
    &.active {
      border-bottom: 1px solid $white;
    }
  }
}

#product_filter_column_active .select2 {
  min-width: 4.375rem;
}

// Needed to override the default inline style of typeahead and take all the width
span.twitter-typeahead {
  width: 100%;

  input.tt-input {
    width: 100%;
  }
}

// text buttons
.btn.btn-text {
  padding: 0;
  cursor: pointer;
  background: transparent;

  &:focus {
    box-shadow: none;
  }
}

// setting dropdown button
.dropdown-toggle.tool-button {
  &::after {
    margin: 0;
    font-size: var(--#{$cdk}size-24);
    color: var(--#{$cdk}primary-800);
    content: "settings";
  }
}

.translation-field {
  display: none;

  &.visible {
    display: block;
  }
}

table.table {
  font-size: 0.8rem;
}

// Needed to override the default inline style of modal header in translations-app
.translations-app {
  .modal-header {
    display: initial;
  }
}

.birthday-select-container {
  .custom-select.form-control {
    width: 100%;
  }
}

/// Need this in order for material choice table select boxes to be aligned correctly
.choice-table {
  .table {
    .form-check {
      padding-left: 0;
    }
  }
}

.scroll-300 {
  max-height: 300px;
  overflow-y: auto;
}
